import React, { Component } from 'react'

export default class index extends Component {
    static tips = <div className='tips'>
        <br />
        <br />
        <p>jsx中&lt;Tag&gt;children&lt;/tag&gt;中间的这部分，会作为子组件的children传递下去</p>
        <p>他的类型也是jsx(React.ReactNode)</p>
        <p>也就是render函数返回的类型</p>
        <p>可以用于包裹标签，使其赋有某些功能</p>
        <p>比如本页的HoverOpacity，可以嵌套的包裹在ClickArea外层</p>
        <p>即实现了点击，也实现了透明，这也是一种组件化的体现</p>
    </div>
    
    render() {
        return (
            <div>
                <p>hover透明</p>
                <HoverOpacity>
                    <img src='http://t14.baidu.com/it/u=2215868056,206379323&fm=224&app=112&f=JPEG?w=227&h=151&s=72A02EAFD45247D24B89346C0300C068' />
                </HoverOpacity>
                <p>点击封装</p>
                <HoverOpacity>
                    <ClickArea style={{ color: '#ff006e', }} id='yukuai'>跳转链接</ClickArea>
                </HoverOpacity>
            </div>
        )
    }
}

// 这个组件当鼠标浮动在元素上方时，使元素变透明
class HoverOpacity extends Component {
    render() {
        return <div className='hover-opacity'>
            {this.props.children}
        </div>
    }
}

// 这个组件当点击时，输出对应id值，延伸一下，可以封装点击事件做区域埋点
class ClickArea extends Component {
    render() {
        return <div {...this.props} onClick={() => alert(`埋点点击,id=${this.props.id}`)}>
            {this.props.children}
        </div>
    }
}